<template>
  <!-- 订单 支付订单详情 -->
  <div class="ordinaryOrder-ordinaryOrderDetails">
    <!-- 导航 -->
    <tz-breadcrumb :pathArr='[{"name": "首页"},{"name": "支付订单", "url": "/ordinaryOrder"}, {"name": "订单详情", "url": "/ordinaryOrderDetails"}]'></tz-breadcrumb>
    <!-- 数据表单 -->
    <div style="margin: 20px;"></div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table :data="orderData"
                  stripe
                  style="width: 100%">
          <el-table-column prop="name"
                           label="名称"></el-table-column>
          <el-table-column prop="value"
                           label="值"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header"
               class="clearfix">
            <span>实时查询第三方支付接口</span>
          </div>
          <div class="text"
               v-loading="threeApiLoading">
            <pre class="pie">{{threeApi == '' ? '暂无数据' : threeApi}}</pre>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    this.getorderinfo();
  },
  data: function () {
    return {
      // 所属商户
      store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
      // 订单号
      out_trade_no: this.$route.query.out_trade_no ? this.$route.query.out_trade_no : '',
      orderData: [],
      threeApi: '',
      threeApiLoading: true
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    getorderinfo () {
      let that = this;
      http.get(api.getorderinfo, {
        token: localStorage.getItem('token'),
        store_code: that.store_code,
        out_trade_no: that.out_trade_no
      }, response => {
        if (response.code === '10001') {
          that.tableData3 = response.data[0];
          that.orderData = [{
            name: '订单号:',
            value: response.data[0].out_trade_no ? response.data[0].out_trade_no : '无'
          }, {
            name: '流水号:',
            value: response.data[0].trade_no ? response.data[0].trade_no : '无'
          }, {
            name: '交易金额:',
            value: response.data[0].total_amount ? response.data[0].total_amount : '无'
          }, {
            name: '支付状态:',
            value: response.data[0].pay_status ? response.data[0].pay_status : '无'
          }, {
            name: '支付通道:',
            value: response.data[0].payways ? response.data[0].payways : '无'
          }, {
            name: '通道实例ID:',
            value: response.data[0].payways ? response.data[0].ways_id : '无'
          }, {
            name: '备注:',
            value: response.data[0].remark ? response.data[0].remark : '无'
          }, {
            name: '创建时间:',
            value: response.data[0].created_at ? response.data[0].created_at : '无'
          }, {
            name: '更新时间:',
            value: response.data[0].updated_at ? response.data[0].updated_at : '无'
          }, {
            name: '商户名:',
            value: response.data[0].store_code ? response.data[0].store_name : '无'
          }, {
            name: '商户code:',
            value: response.data[0].store_code ? response.data[0].store_code : '无'
          }, {
            name: '收银员:',
            value: response.data[0].ways_id ? response.data[0].nickname + '  [ ID:' + response.data[0].cashier_id + ' ]' : '无'
          }, {
            name: '实际到帐:',
            value: response.data[0].real_amount ? response.data[0].real_amount : '无'
          }, {
            name: '消费帐户:',
            value: response.data[0].buyer_id ? response.data[0].buyer_id : '无'
          }];
        }
      }, (err) => {
        console.log(err);
      });
      http.post(api.PayQuery, {
        token: localStorage.getItem('token'),
        port: 'web',
        out_trade_no: that.out_trade_no
      }, response => {
        that.threeApiLoading = !that.threeApiLoading;
        if (response.code === '10001') {
          that.threeApi = JSON.stringify(response.data[0].result, null, 4);
        };
      }, (err) => {
        that.threeApiLoading = !that.threeApiLoading;
        console.log(err);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 70px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
.pie
  background-color rgba(64, 158, 255, 0.1)
  padding 0 10px
  line-height 30px
  font-size 12px
  color #409EFF
  border-radius 4px
  box-sizing border-box
  border 1px solid rgba(64, 158, 255, 0.2)
</style>
